<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>尚优选</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/reset.css">
</head>

<body>
    <!-- 最外层 -->
    <div id="wrapper">
        <!-- 头部开始 -->
        <header id="header">
            <!-- 最顶部 -->
            <div class="headTop">
                <!-- 版心元素 -->
                <div class="headTopMain">
                    <!-- 版心的左侧 -->
                    <div class="left">
                        <h5> 欢迎来到尚优选！ 请</h5>
                        <p>
                            <a href="javascript:;">登录</a>
                            <a href="javascript:;">注册</a>

                        </p>
                    </div>
                    <!--版心右侧 -->
                    <div class="right">
                        <nav>
                            <a href="javascript:;">我的订单</a>
                            <a href="javascript:;">我的购物车</a>
                            <a href="javascript:;">我的尚优选</a>
                            <a href="javascript:;">尚优选会员</a>
                            <a href="javascript:;">企业采购</a>
                            <a href="javascript:;">关注尚优选</a>
                            <a href="javascript:;">合作招商</a>
                            <a href="javascript:;">商家后台</a>

                        </nav>
                    </div>
                </div>
            </div>
            <!-- 下部 -->
            <div class="headBottom">
                <div class="headBottomMain">
                    <!-- logo -->
                    <div class="log">
                        <a href="">
                            <img src="./img/logo.png" alt="">
                        </a>
                    </div>
                    <!--搜索框  -->
                    <div class="search">
                        <input type="text" placeholder="请输入搜索内容">
                        <input type="button" value="提交">
                    </div>
                </div>
            </div>
        </header>
        <!-- 头部结束 -->
        <!-- 分类导航开始 -->
        <div id="navWrap">
            <!-- 版心元素 -->
            <div class="navWrapMain">
                <a href="javascript:;">全部商品分类</a>
                <a href="javascript:;">服装城</a>
                <a href="javascript:;">美妆馆</a>
                <a href="javascript:;">尚优选超市</a>
                <a href="javascript:;">全球购</a>
                <a href="javascript:;">闪购</a>
                <a href="javascript:;">团购</a>
                <a href="javascript:;">有趣</a>
                <a href="javascript:;">秒杀</a>
            </div>
        </div>
        <!-- 分类导航结束 -->
        <!-- 内容区域开始 -->
        <div id="content">
            <div class="contentMain">
                <div class="navPath">
                    <!-- <a href="javascript:;">手机、数码、通信</a>
                    <i>/</i>
                    <a href="javascript:;">手机</a>
                    <i>/</i>
                    <a href="javascript:;">iPhone6S系列</a> -->
                </div>
                <!-- 中间效果开始 -->
                <div class="center">
                   <!-- 左侧放大镜和缩略图区域 -->
                     <div class="left">
                          <!-- 左侧放大镜效果开始 -->
                        <div class="leftTop">
                               <!-- 小图框 -->
                        <div class="smallPic">
                            <img src="./img/s1.png" alt="">
                            <!-- 蒙版元素 -->
                            <!-- <div class="mask">

                            </div> -->
                        </div>
                        <!-- 大图框 -->
                        <!-- <div class="bigPic">
                            <img src="./img/b1.png" alt="">
                        </div> -->
                        </div>
                       <!-- 左侧放大镜效果结束 -->
                       <!-- 下边 -->
                       <div class="leftBootom">
                        <a href="javascript:" class="prev"><</a>
                        <div class="picList">
                            <ul>
                            </ul>
                        </div>
                        <a href="javascript:" class="next">></a>
                       </div>
                     </div>
                     <!-- 右侧商品参数 -->
                     <div class="right">
                        <!-- 商品详情结构 开始-->
                        <div class="rightTop">
                        </div>
                        <!-- 商品详情结构结束 -->
                         <!-- 商品参数的结构布局开始 -->
                        <div class="rightBottom">
                            <!-- 选择之后结果的区域 -->
                            <div class="choose">
                            </div>
                            <!-- 选择参数的区域开始 -->
                            <div class="chooseWrap">
                                <!-- <dl>
                                    <dt>选择颜色</dt>
                                    <dd>金色</dd>
                                    <dd>银色</dd>
                                    <dd>黑色</dd>
                                </dl>

                                <dl>
                                    <dt>内存容量</dt>
                                    <dd>16G</dd>
                                    <dd>64G</dd>
                                    <dd>128G</dd>
                                    <dd>256G</dd>
                                </dl>

                                <dl>
                                    <dt>选择版本</dt>
                                    <dd>公开版</dd>
                                    <dd>官方版</dd>
                                </dl>

                                <dl>
                                    <dt>购买方式</dt>
                                    <dd>官方标配</dd>
                                    <dd>优惠移动</dd>
                                    <dd>电信优惠</dd>
                                </dl> -->
                            </div>
                            <!-- 选择参数的区域开始 -->


                            <!-- 购物车区域开始-->
                            <div class="addCart">
                                <div class="count">
                                    <input type="text">
                                    <a href="javascript:;">+</a>
                                    <a href="javascript:;">-</a>
                                </div>
                                <button>加入购物车</button>
                            </div>
                            <!-- 购物车区域结束-->
                            


                        </div>
                        <!-- 商品参数的结构布局结束 -->
                     </div>
                  
                </div>
              <!-- 中间效果结束 -->

              <!-- 商品详情的中间部分开始 -->
                <div class="goodsDetailWrap">
                    <!-- 左边的侧边栏开始 -->
                    <aside class="leftAside">
                        <!-- 上边 -->
                        <div class="asideTop">
                            <h4 class="active">相关分类</h4>
                            <h4>推荐品牌</h4>
                        </div>

                        <!-- 下边 -->
                        <div class="asideBottom">
                            <div class="active">
                                <ul class="goodsList1">
                                    <li>手机</li>
                                    <li>手机壳</li>
                                    <li>内存卡</li>
                                    <li>iPhone配件</li>
                                    <li>贴膜</li>
                                    <li>耳机</li>
                                    <li>移动电源</li>
                                    <li>平板电脑</li>
                                </ul>
                                <ul class="goodsList2">
                                    <li>
                                        <img src="./img/part01.png" alt="">
                                        <span>Apple苹果iPhone 6s(A1699)</span>
                                        <p>￥6088.00</p>
                                        <div class="button">
                                            <a href="javascript:;">加入购物车</a>
                                        </div>
                                    </li>
                                    <li>
                                        <img src="./img/part01.png" alt="">
                                        <span>Apple苹果iPhone 6s(A1699)</span>
                                        <p>￥6088.00</p>
                                        <div class="button">
                                            <a href="javascript:;">加入购物车</a>
                                        </div>
                                    </li>
                                    <li>
                                        <img src="./img/part01.png" alt="">
                                        <span>Apple苹果iPhone 6s(A1699)</span>
                                        <p>￥6088.00</p>
                                        <div class="button">
                                            <a href="javascript:;">加入购物车</a>
                                        </div>
                                    </li>
                                    <li>
                                        <img src="./img/part01.png" alt="">
                                        <span>Apple苹果iPhone 6s(A1699)</span>
                                        <p>￥6088.00</p>
                                        <div class="button">
                                            <a href="javascript:;">加入购物车</a>
                                        </div>
                                    </li>
                                    
                                </ul>
                            </div>
                            <div>推荐品牌内容</div>
                        </div>
                    </aside>
                    <!-- 左边的侧边栏结束 -->
                     
                    <!-- 右边的结构开始 -->
                    <div class="rightDetail">
                        <!-- 搭配选项卡开始 -->
                        <div class="chooseBox">
                            <!-- 标题？、 -->
                            <h4>选择搭配</h4>
                            <div class="listWrap">
                                <div class="left">
                                    <img src="./img/l-m01.png" alt="">
                                    <p>￥5299</p>
                                    <i>+</i>
                                </div>
                                <ul class="middle">
                                    <li>
                                        <img src="./img/dp01.png" alt="">
                                        <span>Feless费勒斯VR</span>
                                        <div>
                                            <input type="checkbox" value="50">
                                            <span>50</span>
                                        </div>
                                    </li>
                                    <li>
                                        <img src="./img/dp02.png" alt="">
                                        <span>Feless费勒斯VR</span>
                                        <div>
                                            <input type="checkbox" value="50">
                                            <span>50</span>
                                        </div>
                                    </li>
                                    <li>
                                        <img src="./img/dp03.png" alt="">
                                        <span>Feless费勒斯VR</span>
                                        <div>
                                            <input type="checkbox" value="50">
                                            <span>50</span>
                                        </div>
                                    </li>
                                    <li>
                                        <img src="./img/dp04.png" alt="" >
                                        <span>Feless费勒斯VR</span>
                                        <div>
                                            <input type="checkbox" value="50">
                                            <span>50</span>
                                        </div>
                                    </li>
                                </ul>
                                <div class="right">
                                    <div>已购0件商品</div>
                                    <p>套餐价</p>
                                    <i>￥5299</i>
                                    <div>
                                        <button>加入购物车</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 搭配选项卡结束 -->

                        <!-- 选项卡开始 -->
                        <div class="bottomDetail">
                            <!-- 菜单 -->
                            <ul class="tabBtns">
                                <li class="active"><a href="javascript:;">商品介绍</a></li>
                                <li><a href="javascript:;">规格与包装</a></li>
                                <li><a href="javascript:;">售后与保障</a></li>
                                <li><a href="javascript:;">商品评价</a></li>
                                <li><a href="javascript:;">手机社区</a></li>
                            </ul>
                            <!-- 内容 -->
                            <div class="tabContent">
                                <div class="active"> 商品介绍
                                    <ul>
                                       <li>分辨率：1920*1080（FHD）</li> 
                                       <li>后置摄像头：1200万像素</li> 
                                       <li>前置摄像头：500万像素</li> 
                                       <li>核数：其他</li> 
                                       <li>频率：以官网信息为主</li> 
                                       <li>品牌：Apple</li> 
                                       <li>商品名称：APPLEiPhone 6s Plus</li> 
                                       <li>商品产地：中国大陆</li> 
                                       <li>商品毛重：0.51kg</li>
                                       <li>热点：指纹识别，Apple Pay， 金属机身，拍照神器</li> 
                                       <li>系统：iOS</li> 
                                       <li>像素：1000-1920</li> 
                                       <li>机身内存：64G 128G 256G</li> 
                                       <li></li> 

                                    </ul>
                                    <img src="./img/intro01.png" alt="">
                                    <img src="./img/intro02.png" alt="">
                                    <img src="./img/intro03.png" alt="">

                                   </div>
                                <div>规格与包装</div>
                                <div>售后与保障</div>
                                <div>商品评价</div>
                                <div>手机社区</div>
                            </div>

                            <div class="bottom">

                            </div>
                        </div>

                        <!-- 选项卡结束 -->

                    </div>
                    <!-- 右边的结构结束 -->

                </div>
              <!-- 商品详情的中间部分结束-->

            </div>
        </div>
        <!-- 内容区域结束 -->

        <!-- 右侧侧边栏开始 -->
        <div class="rightAside asideClose">
            <!-- 按钮的区域 -->
            <div class="btns btnsClose"></div>

            <!-- 侧边栏的内容区域 -->
            <div class="content"></div>

            <!-- 侧边导航 -->
            <ul class="navlist">
                <li>
                    <p></p>
                    <i>尚选会员</i>
                </li>
                <li>
                    <p></p>
                    <i>尚选会员</i>
                </li>
                <li>
                    <p></p>
                    <i>尚选会员</i>
                </li>
                <li>
                    <p></p>
                    <i>尚选会员</i>
                </li>
                <li>
                    <p></p>
                    <i>尚选会员</i>
                </li>
                <li>
                    <p></p>
                    <i>尚选会员</i>
                </li>
            </ul>
        </div>
        <!-- 右侧侧边栏结束-->

    </div>
  
</body>
  <script type="text/javascript" src="js/data.js"></script>
  <script type="text/javascript" src="js/index.js"></script>
</html>